<template>
	<!-- http://localhost:8080/#/pages/home/PersonalData/newOpusList -->
	<view id="newOpusList">
		<view class="uploadType">
			<u-upload width="90" height="90" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1">
				<image :src="imageSrc" mode="widthFix" />
			</u-upload>
			<view class="uploadWithin">
				<view>更换封面图</view>
				<view>320 × 320 以上</view>
			</view>
		</view>
		<view class="inputType">
			<u--input placeholder="作品集标题" @change="change" v-model="titleValue" border="bottom" clearable></u--input>
		</view>
		<view class="inputType s">
			<u--textarea v-model="textareaValue" height="270rpx" @blur="textareaBlur"
				:placeholder="placeholder"></u--textarea>
		</view>
		<view class="buttonType">
			<button class="baocun" @click="submit">保存</button>
			<button class="del" @click="del(id)">删除作品集</button>
		</view>
	</view>
</template>
<script>
	import {
		uploadFile,
		uploadMp3File
	} from '@/store/upload.js';
	export default {
		data() {
			return {
				imageSrc: '',
				id: '',
				fileList1: [],
				titleValue: '', //输入框
				textareaValue: '', //文本域
				placeholder: '向大家介绍一下你的作品集/专辑/画集/小说吧...'
			}
		},
		onLoad(option) {
			if (option && typeof option.id === 'string' && option.id.trim() !== '') {
				this.id = option.id;
				this.getDetail(option.id);
			}
		},

		onBackPress(event) {
			uni.navigateBack({
				delta: 1
			});
			return true;
		},
		methods: {
			del() {
				this.$api.getDel({
					id: this.id
				}).then(res => {
					console.log("res", res)
					if (res.code == 1) {
						uni.showToast({
							title: '删除成功！',
							icon: 'success'
						});
						uni.redirectTo({
							url: "/pages/home/joinOpusMap/joinOpusMap"
						})
					}
				})
			},
			submit() {
				if (this.id != '') {
					// 修改
					this.$api.getEdit({
						title: this.titleValue,
						content: this.textareaValue,
						cover: this.imageSrc,
						id: this.id
					}).then(res => {
						console.log("res=>修改,", res)
						if (res.code == 1) {
							uni.showToast({
								title: '修改成功！',
								icon: 'success'
							});
							uni.redirectTo({
								url: "/pages/home/opusDirectory/opusDirectory?id=" + this.id
							})
						}
					})
				} else {
					// 新增
					this.$api.getAdd({
						title: this.titleValue,
						content: this.textareaValue,
						cover: this.imageSrc
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '添加成功！',
								icon: 'success'
							});
							uni.redirectTo({
								url: "/pages/home/joinOpusMap/joinOpusMap?id=" + this.id
							})
						}
					})
				}


			},
			getDetail(id) {
				this.$api.getDetail({
					id: id
				}).then(res => {
					const data = res.data;
					this.titleValue = data.title;
					this.textareaValue = data.content;
					this.imageSrc = data.cover;
					this.id = id
					console.log("RES", res)
				})
			},
			change(e) { //作品集标题
				console.log('change', e);
			},
			textareaBlur(e) { //文本域
				console.log("eeeee", this.textareaValue)
			},
			// 图片上传
			// 删除图片
			// 删除图片
			deletePics(event) {
				this.imageList.shift(event, 1)
				console.log(this.imageList.map(item => item.url), '删除代码')
				this.editUserInfo({
					slider: this.imageList.map(item => item.url)
				})
			},
			// 新增图片
			async afterRead(event) {

				try {
					// 使用 map 来创建一个包含所有文件 URL 的数组
					const fileUrls = event.file.map(item => item.url);

					// 上传所有文件
					const result = await uploadFile(fileUrls);

					// 打印第一个结果
					console.log("result", result);

					// 假设您想存储所有上传的图片
					this.imageSrc = result[0]; // 或者根据您的需要做其他处理

					console.log("this.images", this.images)
				} catch (error) {
					console.error("上传过程中出现错误:", error);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-upload,
	::v-deep .u-upload__wrap,
	::v-deep .u-upload__button,
	::v-deep .u-upload__wrap__preview,
	::v-deep .u-upload__wrap__preview__image {
		background: #f7f7f7;
		width: 100% !important;
		height: 100% !important;
		border-radius: 20rpx;
	}

	::v-deep .u-upload__wrap {
		display: flex;
		justify-content: center;
		align-content: center;
	}

	::v-deep .u-upload__status {
		z-index: 555;
	}

	::v-deep .u-upload__wrap__preview__image {
		position: relative;
		z-index: 444;
	}

	/* 
	 
	 */
	#newOpusList {
		width: 100%;
		background: #f7f7f7;
	}

	.uploadType {
		width: 90%;
		height: 680rpx;
		margin: auto;
		border: 1px #ebebeb solid;
		border-radius: 20rpx;

		image {
			width: 650rpx;
			position: relative;
			z-index: 444;
			display: flex;
		}

		.uploadWithin {
			width: 300rpx;
			height: 200rpx;
			border-radius: 20rpx;
			background-color: #acacac;
			// border: 1px red solid;
			position: absolute;
			top: 280rpx;
			left: 230rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			view {
				color: #fff;
				font-size: 24rpx;
				line-height: 2;
			}
		}
	}

	.inputType {
		width: 90%;
		margin: auto;
		padding: 20rpx;
	}

	.s {
		::v-deep .input-placeholder {
			font-size: 30rpx !important;
		}

		::v-deep .u-textarea {
			background: #f7f7f7;
		}
	}

	.buttonType {
		width: 90%;
		margin:20rpx auto;
		border: 1rpx solid #f7f7f7;

		button {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 0 !important;
			margin: 40rpx 0;
			font-size: 32rpx;
		}

		.baocun {
			color: #fff;
			background: #ff6600;
		}

		.del {
			background: #eaeaea;
		}

		::v-deep uni-button:after {
			border: 0 !important;
		}
	}
</style>